.app-action-wrap {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 20px;
  flex-shrink: 0;

  .app-action-right-wrap,
  .app-action-left-wrap {
    flex: 2 0 100px;

    .open-file-line {
      cursor: pointer;

      &:hover {
        font-weight: bold;
        text-decoration: underline;
      }
    }

    .size-input {
      border: none;
      padding: 0;
      display: inline-block;
      width: 50px;
      outline: none;
      border: none;
      background: none;
      box-sizing: border-box;
      touch-action: manipulation;

      &::-webkit-inner-spin-button,
      &::-webkit-outer-spin-button {
        -webkit-appearance: none;
        appearance: none;
        margin: 0;
      }
    }
  }

  .app-action-left-wrap {
    width: 350px;
    flex-basis: 350px;
    flex-grow: 0;
    overflow: hidden;

    .output-setting {
      padding: 0 4px;
      display: inline-block;
      cursor: pointer;
  
      &:hover {
        color: var(--active-color);
        font-weight: bold;
      }
    }

    .action-item {
      height: 36px;
      box-sizing: border-box;
    }
  }

  .app-action-right-wrap {
    width: 50%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }
  
  .img-wrap {
    height: 100%;
    padding: 0 15px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    border-radius: 4px;
  }

  .img-list {
    padding: 5px 0 20px;

    .img-item {
      margin-top: 15px;
      border-radius: 4px;
      padding: 6px 12px;

      .img-item-head {
        display: flex;
        align-items: center;
        padding-bottom: 4px;
      }

      .img-name {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        text-wrap: nowrap;
        font-weight: bold;
        color: #515255;
      }

      .img-item-info {
        font-size: 12px;
        color: #8f9094;
      }

      .img-item-faild-msg {
        max-height: 30px;
        overflow-y: auto;
        overflow-x: hidden;
        font-size: 12px;
        color: #8f9094;
      }
    }
  }

  .task-action {
    margin-top: 10px;
    display: flex;
    justify-content: right;

    .button {
      flex-shrink: 0;
      padding: 4px 10px !important;
    }
  }

  .switch {
    transform: rotate(90deg);
    cursor: pointer;
  }
}
